<template>
	<view>
		<!-- 商品数据 -->
		<view class="goods-detail">
			<view class="goods-detail-top">
				<view class="goods-img">
					<image :src="orderInfo.imgurl" style="width: 200rpx; height: 200rpx;"></image>
				</view>
				<view class="goods-info">
					<view>{{ orderInfo.goods_title }}</view>
					<view class="flex text-color">
						<view style="white-space: nowrap;">套餐：</view>
						<view> {{ orderInfo.setmeal_title }}</view>
					</view>
					<view class="flex text-color">
						<view>租期：</view>
						<view> {{ orderInfo.lease_time }}</view>
					</view>
					<view class="flex">
						<view>总租金：</view>
						<view>￥{{ orderInfo.rent_total }}（{{ orderInfo.month_total }}期）<text
								class="text-color">x{{ orderInfo.amount }}</text></view>
					</view>
				</view>
			</view>
			<view class="divider"></view>
			<view class="goods-detail-bottom">
				<view class="flex-col">
					<view>{{ orderInfo.rent_total }}</view>
					<view class="text-color">应付租金(元)</view>
				</view>
				<view class="flex-col">
					<view>{{ orderInfo.paid_rent_total }}</view>
					<view class="text-color">已付租金</view>
				</view>
				<view class="flex-col">
					<view>{{ orderInfo.rent_total - orderInfo.paid_rent_total }}</view>
					<view class="text-color">待付租金</view>
				</view>
			</view>
		</view>

		<!-- 第几期 -->
		<view style="padding: 0 20rpx;">
			<billNotDone ref="billNotDone" :order="id" :olist="olist" :view="isView"></billNotDone>
		</view>
	</view>
</template>

<script>
	import billNotDone from './child/billNotDone.vue'
	export default {
		components: {
			billNotDone
		},
		data() {
			return {
				id: null,
				orderInfo: {},
			}
		},
		onLoad(options) {
			this.isView=options.isView
			this.id = options.order_id
			console.log(this.isView);
			this.getOrderInfo()
		},
		methods: {
			async getOrderInfo() {
				const {
					data: res
				} = await uni.$http.get(`/Wechat/Order/getOrderLease?order_id=${ this.id }`)
				this.orderInfo = res.data
				this.orderInfo.imgurl = getApp().globalData.baseImg + this.orderInfo.imgurl
				this.$refs.billNotDone.orderList = this.orderInfo.order_lease
				this.$refs.billNotDone.length = this.orderInfo.order_lease.length
			}
		}
	}
</script>

<style scoped>
	.goods-detail {
		padding: 20rpx;
		padding-top: 40rpx;
		background-color: #fff;
	}

	.goods-detail-top {
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}

	.text-color {
		font-size: 26rpx;
		color: #999;
	}

	.divider {
		width: 100%;
		height: 1rpx;
		background-color: #999;
	}

	.flex {
		display: flex;
		justify-content: start;
	}

	.goods-detail-top {
		display: flex;
		justify-content: start;
		line-height: 1.5rem;
	}

	.goods-detail-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 40rpx;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>